<!DOCTYPE html>
<html>
<head>
<title>Physics Force Analysis</title>
</head>
<body>

<canvas id="physicsCanvas" width="820" height="350" style="border:1px solid #d3d3d3;"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- General Drawing Parameters ---
    const containerWidth = 120;
    const containerHeight = 200;
    const sphereRadius = 25;
    const startY = 50;
    const startX = 50;
    const gap = 70;
    
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'black';
    ctx.font = '30px serif';
    ctx.textAlign = 'center';

    // --- Color Palette ---
    const lightLiquidColor = '#D3D3D3';
    const darkLiquidColor = '#A9A9A9';
    const objectColor = 'black';

    // --- Helper function to draw the container ---
    function drawContainer(x) {
        ctx.beginPath();
        ctx.moveTo(x, startY);
        ctx.lineTo(x, startY + containerHeight);
        ctx.lineTo(x + containerWidth, startY + containerHeight);
        ctx.lineTo(x + containerWidth, startY);
        ctx.stroke();
    }

    // --- Draw Diagram 甲 (Jia) ---
    function drawJia(x) {
        const cx = x + containerWidth / 2;
        const waterLevelY = startY + 110;
        const sphereCY = startY + 100;

        // Draw liquid
        ctx.fillStyle = lightLiquidColor;
        ctx.fillRect(x, waterLevelY, containerWidth, startY + containerHeight - waterLevelY);

        // Draw sphere
        ctx.fillStyle = objectColor;
        ctx.beginPath();
        ctx.arc(cx, sphereCY, sphereRadius, 0, 2 * Math.PI);
        ctx.fill();

        // Draw container outline
        drawContainer(x);

        // Draw label
        ctx.fillStyle = objectColor;
        ctx.fillText('甲', cx, startY + containerHeight + 40);
    }

    // --- Draw Diagram 乙 (Yi) ---
    function drawYi(x) {
        const cx = x + containerWidth / 2;
        const waterLevelY = startY + 80;
        const sphereCY = startY + 140;

        // Draw liquid
        ctx.fillStyle = lightLiquidColor;
        ctx.fillRect(x, waterLevelY, containerWidth, startY + containerHeight - waterLevelY);

        // Draw tether
        ctx.beginPath();
        ctx.moveTo(cx, sphereCY + sphereRadius);
        ctx.lineTo(cx, startY + containerHeight);
        ctx.stroke();

        // Draw sphere
        ctx.fillStyle = objectColor;
        ctx.beginPath();
        ctx.arc(cx, sphereCY, sphereRadius, 0, 2 * Math.PI);
        ctx.fill();

        // Draw container outline
        drawContainer(x);

        // Draw label
        ctx.fillStyle = objectColor;
        ctx.fillText('乙', cx, startY + containerHeight + 40);
    }

    // --- Draw Diagram 丙 (Bing) ---
    function drawBing(x) {
        const cx = x + containerWidth / 2;
        const waterLevelY = startY + 60; // Higher level due to different liquid density but same mass
        const sphereCY = startY + 130;

        // Draw liquid
        ctx.fillStyle = darkLiquidColor;
        ctx.fillRect(x, waterLevelY, containerWidth, startY + containerHeight - waterLevelY);
        
        // Draw tether (as shown in image, despite "suspension" description)
        ctx.beginPath();
        ctx.moveTo(cx, sphereCY + sphereRadius);
        ctx.lineTo(cx, startY + containerHeight);
        ctx.stroke();

        // Draw sphere
        ctx.fillStyle = objectColor;
        ctx.beginPath();
        ctx.arc(cx, sphereCY, sphereRadius, 0, 2 * Math.PI);
        ctx.fill();

        // Draw container outline
        drawContainer(x);

        // Draw label
        ctx.fillStyle = objectColor;
        ctx.fillText('丙', cx, startY + containerHeight + 40);
    }

    // --- Draw Diagram 丁 (Ding) ---
    function drawDing(x) {
        const cx = x + containerWidth / 2;
        const waterLevelY = startY + 80; // Same level as Yi
        const sphereCY = startY + 140;

        // Draw liquid
        ctx.fillStyle = lightLiquidColor;
        ctx.fillRect(x, waterLevelY, containerWidth, startY + containerHeight - waterLevelY);

        // Draw sphere
        ctx.fillStyle = objectColor;
        ctx.beginPath();
        ctx.arc(cx, sphereCY, sphereRadius, 0, 2 * Math.PI);
        ctx.fill();
        
        // Draw force vector F
        const forceLineTopY = startY + 20;
        const forceLineBottomY = sphereCY - sphereRadius;
        ctx.beginPath();
        ctx.moveTo(cx, forceLineTopY);
        ctx.lineTo(cx, forceLineBottomY);
        // Arrowhead
        ctx.moveTo(cx - 6, forceLineBottomY - 10);
        ctx.lineTo(cx, forceLineBottomY);
        ctx.lineTo(cx + 6, forceLineBottomY - 10);
        ctx.stroke();
        
        ctx.font = 'italic bold 24px serif';
        ctx.fillText('F', cx + 18, forceLineTopY + 30);
        ctx.font = '30px serif'; // Reset font for label

        // Draw container outline
        drawContainer(x);

        // Draw label
        ctx.fillStyle = objectColor;
        ctx.fillText('丁', cx, startY + containerHeight + 40);
    }

    // --- Main Drawing Execution ---
    const x1 = startX;
    const x2 = startX + containerWidth + gap;
    const x3 = x2 + containerWidth + gap;
    const x4 = x3 + containerWidth + gap;

    drawJia(x1);
    drawYi(x2);
    drawBing(x3);
    drawDing(x4);

</script>

</body>
</html>